<template>
  <div>
    <panel-top :earn="not_pay_income" :pay_amount="pay_amount" :yesterdayearn="yesterdayearn" :per="per" :loading="paymentInfo_init_loading"/>
    <section class="table-box" v-loading="tableLoading" :element-loading-text="$t('unit.loading')">
      <div class="header">
        <span>{{$t('income.history_income')}}</span>
        <!-- <div class="area">
          <span class="active">{{$t('income.history_income')}}</span>
        </div> -->
        <!-- <div class="excel" @click="excel">
          <spinner v-if="excelLoading" />
          <span v-else>导出图表</span>
        </div> -->
      </div>
      <table>
        <thead>
          <tr>
            <th class="pointer">
              {{$t('payhistory.trade_tx_id')}}
            </th>
            <th class="pointer">
              {{$t('payhistory.paydata')}}
            </th>
            <th class="pointer">
              {{$t('payhistory.paynum')}}
            </th>
          </tr>
        </thead>
        <tbody>
          <template v-if="innovate_count">
            <tr v-for="(item, index) in innovate" :key="index">
              <td>
                <el-tooltip placement="top" effect="light">
                  <div slot="content">{{item.trade_tx_id}}</div>
                  <a :href="toHref(item.trade_tx_id)" class="text-truncate pointer" target="_blank">{{item.trade_tx_id}}</a>
                </el-tooltip>
              </td>
              <td>{{item.pay_time}}</td>
              <td>{{tableValueFormat(item.pay_amount)}} {{nowCoinType}}</td>
            </tr>
          </template>
          <template v-else>
            <tr>
              <td colspan="6">{{$t('unit.no_data')}}</td>
            </tr>
          </template>
        </tbody>
      </table>
    </section>
  </div>
</template>
<script>
import { InWorkStats, InWorkerPayment } from '@/api';
import { mapGetters } from 'vuex';
import panelTop from './common/panelTop';

export default {
  components: {
    panelTop,
  },
  data() {
    return {
      timer: undefined,
      not_pay_income: '',
      pay_amount: '',
      yesterdayearn: '',
      per: '',
      paymentInfoLoading: false,
      paymentInfo_init_loading: true,

      // excelLoading: false,
      tableLoading: false,
      innovate: [],
      innovate_count: 0,
    };
  },
  computed: {
    ...mapGetters(['subCoinType', 'subAddress', 'subId']),
    nowCoinType() {
      return this.subCoinType.toUpperCase();
    },
    tableValueFormatParm() {
      if (this.subCoinType === 'eth') {
        return 10 ** 9;
      }
      return 10 ** 8;
    },
    incomeDecimal() {
      return this.subCoinType === 'eth' ? 9 : 8;
    },
  },
  created() {
    this.getPaymentInfo();
    this.getInWorkerPayment();
    this.timer = window.setInterval(() => {
      this.getPaymentInfo();
      this.getInWorkerPayment();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    // excel() {},
    toHref(tx) {
      switch (this.subCoinType) {
        case 'eth':
          return `http://etherscan.io/tx/${tx}`;
        case 'etp':
          return `https://explorer.mvs.org/tx/${tx}`;
        default:
          /* eslint-disable no-script-url */
          return 'javascript:;';
      }
    },
    getInWorkerPayment() {
      if (this.tableLoading) {
        return;
      }
      this.tableLoading = true;
      InWorkerPayment({
        coin_type: this.subCoinType,
        address: this.subAddress,
      })
        .then((res) => {
          if (res.data.status === 1) {
            this.innovate = res.data.data.data;
            this.innovate_count = res.data.data.count;
          } else {
            this.innovate = [];
            this.innovate_count = 0;
          }
          this.tableLoading = false;
        }).catch(() => {
          this.tableLoading = false;
        });
    },
    getPaymentInfo() {
      if (this.paymentInfoLoading) {
        return;
      }
      this.paymentInfoLoading = true;
      InWorkStats({
        coin_type: this.subCoinType,
        address: this.subAddress,
      }).then((response) => {
        if (response.data.status === 1) {
          const data = response.data.data;
          this.not_pay_income = this.tableValueFormat(data.not_pay_income);
          this.pay_amount = this.tableValueFormat(data.pay_income);
          this.yesterdayearn = this.tableValueFormat(data.net_income);
          this.per = this.tableValueFormat(data.today_income);
        } else {
          this.not_pay_income = '';
          this.pay_amount = '';
          this.yesterdayearn = '';
          this.per = '';
        }
        this.paymentInfoLoading = false;
        this.paymentInfo_init_loading = false;
      }).catch(() => {
        this.paymentInfoLoading = false;
        this.paymentInfo_init_loading = false;
      });
    },
    tableValueFormat(value) {
      return (value / this.tableValueFormatParm).toFixed(this.incomeDecimal);
    },
  },
  watch: {
    subId() {
      this.tableLoading = false;
      this.paymentInfo_init_loading = true;
      this.getPaymentInfo();
      this.getInWorkerPayment();
    },
  },
};
</script>
<style lang="scss" scoped>
.text-truncate{
  color: #247ba0;
}
</style>
